<template>
  <div class="container">
    <el-card shadow="hover">
      <!-- 表头信息 -->
      <el-row :gutter="12" class="header">
        <el-col :span="1.5">
          <span class="subjectName">学科名称</span>
        </el-col>
        <el-col :span="6">
          <el-input clearable v-model="qurey.subjectName" @clear="loadList">
          </el-input>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="deleVal">清除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" @click="loadList">搜索</el-button>
        </el-col>
        <el-button
          type="success"
          icon="el-icon-edit"
          class="addSubject"
          @click="adddialogVisible = true"
          >新增学科</el-button
        >
      </el-row>
      <el-alert :title="`一共有${this.total}条数据`" type="info" show-icon>
      </el-alert>
      <!-- 表单信息 -->
      <el-table style="width: 100%" :data="subjectList"  :header-cell-style="headClass">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template v-slot="scope">
            <span v-if="scope.row.isFrontDisplay === 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="230">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                $router.push(
                  `directorys?id=${scope.row.id}&name=${scope.row.subjectName}`
                )
              "
              >学科分类</el-button
            >
            <el-button
              type="text"
              @click="
                $router.push(
                  `tags?id=${scope.row.id}&name=${scope.row.subjectName}`
                )
              "
              >学科标签</el-button
            >
            <el-button type="text" @click="updateBox(scope.row.id)"
              >修改</el-button
            >
            <el-button type="text" @click="removeBox(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="qurey.page"
        :page-sizes="[1, 2, 3, 5, 10]"
        :page-size="qurey.pagesize"
        background
        layout="prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加学科对话框 -->
    <subjectAdd
      :addDialog="adddialogVisible"
      @closed="colseDialog()"
      :loadList="loadList"
    ></subjectAdd>
    <!-- 编辑学科对话框 -->
    <subjectUpdate
      :updateDialog="updateDialogVisible"
      :loadList="loadList"
      :updateFrom="updateFroms"
      @closed="updateDialogVisible = false"
    ></subjectUpdate>
  </div>
</template>

<script>
import { list, remove, detail } from '@/api/hmmm/subjects.js'
import subjectAdd from '../components/subjects-add.vue'
import subjectUpdate from '../components/subject-update.vue'
export default {
  components: { subjectAdd, subjectUpdate },
  data() {
    return {
      qurey: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      subjectList: [],
      total: 0,
      adddialogVisible: false,
      updateDialogVisible: false,
      updateFroms: {}
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    // 获取学科列表
    async loadList() {
      const { data } = await list(this.qurey)
      this.subjectList = data.items
      this.total = data.counts
    },
    // 分页数据渲染
    handleSizeChange(newSize) {
      this.qurey.pagesize = newSize
      this.loadList()
    },
    handleCurrentChange(newPage) {
      this.qurey.page = newPage
      this.loadList()
    },
    // 清除搜索框数据
    deleVal() {
      this.qurey.subjectName = ''
      this.loadList()
    },
    // 添加学科对话框
    colseDialog() {
      this.adddialogVisible = false
    },
    // 删除数据操作
    async removeBox(id) {
      await this.$confirm('此操作将永久删除该学科信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove({
            id: id,
            data: this.subjectList
          })
          if (res.status !== 200) return this.$message.error('删除该条数据失败')
          this.$message({
            type: 'success',
            message: '删除该条数据成功!'
          })
          if (this.total % this.qurey.pagesize === 1) {
            this.qurey.page--
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      this.loadList()
    },
    // 编辑修改数据
    async updateBox(id) {
      const { data: res } = await detail({
        id: id,
        data: this.subjectList
      })
      this.updateFroms = res
      this.updateDialogVisible = true
    },
    colseUpdateDialog() {
      this.updateDialogVisible = false
    },
    // 表头样式
    headClass() {
      return 'background-color: #fafafa;border-bottom: 3px solid #e8e8e8;'
    }
  }
}
</script>

<style scoped lang="less">
.header {
  .subjectName {
    color: #000;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
  }
  .addSubject {
    float: right;
  }
}
.el-alert {
  margin: 16px 0;
}
/deep/.el-pagination__jump {
  margin-left: 0;
}
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
